<script>
import { leaveList } from '@/api/lwj.js'
import  router  from '@/router'
// import  router  from '@/router.index.js'


export default {
    data() {
        return {
            // 表格数据
            tableData: [],
            // /当前页码
            currentPage: 1,
            // 用来标记是否打开抽屉效果
            drawer: false,
            // 收集请假数据的对象
            formData: {
                stuName: '',
                class: '',
                leaveTime: '',
                leaveCause: '',
                checkedKeys: [],
            },
            useId: '',
           

        }
    },
    mounted() {
        //  请求数据
        leaveList().then(res => {
            console.log(res);
            //   获取请求的数据
            this.tableData = res.data;
            // console.log(this.tableData);
            
            let qqq = localStorage.getItem('key')
            if( qqq == '' || qqq == undefined){
                // 没有获取到数据
            }else{
                this.tableData.push(JSON.parse(qqq))
            }
        })
    },
    computed: {
        // 根据当前页码获取到当前页的数据
        computedTableData() {
            return this.tableData.slice(
                (this.currentPage - 1) * 10,
                (this.currentPage - 1) * 10 + 10
            );
        },
    },
    methods: {
        // 删除按钮的点击事件
        deleteClick(row) {
            this.useId = row.stuId;
            // console.log(this.useId);

            // console.log(row);
            // confirm 消息确认框
            if (confirm("您确定要删除该数据吗")) {

                for (let item in this.tableData) {
                    // console.log(this.tableData[item]);
                    if (this.tableData[item].stuId == this.useId) {
                        // console.log(123);
                        this.tableData.splice(item, 1)
                    }
                }
            } else {
                // 不做任何处理
            }
        },

        // 点击添加请假名单 的点击事件
        addClick(){
            console.log(23456);
            router.push('/leave/leaveList')
        }
    }
}

</script>
<template>
    <div>
        <div class="header">
            请假列表
            <el-button type="primary" @click="addClick"> 添加请假名单 </el-button>
        </div>


        <!-- --------------- 表格数据渲染 ---------------- -->
        <el-table style="width: 100%;display:flex" :data="computedTableData">

            <el-table-column type="index" label="序号" :index="(currentPage - 1) * 10 + 1" width="80" />

            <el-table-column prop="stuName" label="请假学生" width="180" />
            <el-table-column prop="class" label="请假班级" width="180" />
            <el-table-column prop="leaveTime" label="起止时间" width="180" />
            <el-table-column prop="leaveCause" label="请假事由" width="180" />
            <el-table-column label="操作">
                <!-- <el-button>编辑</el-button> -->
                <template #default="scope">
                    <el-button type="danger" @click="deleteClick(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- -------------- 做分页显示用的 ----------------- -->
        <el-pagination background layout="prev,pager,next" v-model:current-page="currentPage" :total="tableData.length" />


        <!-- -------------- 抽屉效果 ---------------- -->
        <!-- <el-drawer v-model="drawer" @close="close">
                    <template #header>
                        <h4>{{ interfaceType == "10086" ? "添加列表" : "编辑列表" }}</h4>
                    </template>

                    <el-form-item label="请假学生">
                        <el-input placeholder="请输入学生姓名" v-model="formData.stuName" />
                    </el-form-item>

                    <el-form-item label="学生班级">
                        <el-select placeholder="请选择学生班级" v-model="formData.role">
                            <el-option label="一年级一班" :value="1" />
                            <el-option label="一年级二班" :value="2" />
                        </el-select>
                    </el-form-item>

                    <el-form-item label="起止时间">
                        <el-input placeholder="请输入时间" v-model="formData.leaveTime" />
                    </el-form-item>

                    <el-form-item label="请假事由">
                        <el-input placeholder="请输入请假事由" v-model="formData.leaveCause" />
                    </el-form-item>

                    <el-button v-if="interfaceType == '10086'" @click="add">添加</el-button>
                    <el-button v-else @click="update">编辑(提交)</el-button>
                </el-drawer> -->

    </div>
</template>
<style scoped lang="scss">
.header {
    margin-bottom: 16px;
}
</style>























<!-- <script>


export default {
    data() {
        return {
            sj: '',
            lx: '',
            zt: ''
        }
    }
}

</script> -->

<!-- <template>
    <div>
        <h1>请假列表</h1>

        <div class="box">
            <el-form-item class="title" label="请假时间 :">
                <el-input class="type" placeholder="请输入" v-model="sj" />
            </el-form-item>

            <el-form-item class="title title" label="请假类型 :">
                <el-select class="type" placeholder="请选择 :" v-model="lx">
                    <el-option label="事假" value="1" />
                    <el-option label="病假" value="2" />
                </el-select>
            </el-form-item>

            <el-form-item class="title title" label="请假状态 :">
                <el-select class="type" placeholder="请选择 :" v-model="zt">
                    <el-option label="待审核" value="1" />
                    <el-option label="已通过" value="2" />
                </el-select>
            </el-form-item>
            
            <el-button class="button" type="primary">查询</el-button>
        </div>
    </div>
</template> -->
<!-- <style lang="scss" scoped>
.box {
    width: 100%;
    background-color: #fff;
    display: flex;
    /* position: relative; */
}

.title {
    width: 100%;
    height: 70px;
    display: flex;
    align-items: center;
}

.type {
    margin-left: 15px;
}

.button{
    /* position: absolute;
    top: 20px;
    right: 0; */
}
</style> -->